<template>
    <div id="search">

      <!-- 搜索框 -->
      <form class="search">
          <div class="input-cover">
            <i class="input-icon"></i>
            <input type="text" class="input-text" v-model="keywords" @blur="blur" @focus="focus"  @keyup="inputswitch" @keydown.enter="result">
            <label class="holder">{{this.labelChange?'搜索歌曲、歌手、专辑':''}}</label>
            <figure class="close">
                <i class="close-icon" v-show="this.keywords.length!=0" @click="close"></i>
            </figure>
          </div>
      </form>

      <!-- 搜索页面的动态组件  searchhot  searchsuggest searchresult-->
      <component :is="name" :keywords="keywords" :wordHistory="wordHistory" 
      @changekeyword="changeKeyword" @delhot="delhotword" @play="$emit('play',$event)"></component>
    </div>
</template>

<script>
import SearchHot from "@/components/SearchHot.vue"
import SearchSuggest from "@/components/SearchSuggest.vue"
import SearchResult from "@/components/SearchResult.vue"
export default{
    data(){
        return{
            keywords:"",
            labelChange:true,
            name:"SearchHot",
            wordHistory: [],
        }
    },
    mounted() {
        if (JSON.parse(localStorage.getItem("searchhistory"))) {
            this.wordHistory = JSON.parse(localStorage.getItem("searchhistory"));
        }
	},
    methods:{
        close(){
            this.keywords=""
            this.labelChange=true
            this.name="SearchHot"
        },
        changeKeyword(keyword){
            this.labelChange=false
            this.keywords=keyword
            this.name="SearchResult"
            this.setHistory()
        },
        setHistory(){
            if (!this.wordHistory.includes(this.keywords)) {
					//第一次添加历史记录
					// this.wordHistory.unshift(this.keywords);
					// localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
                    console.log(this.keywords)
				} else {
					let i = this.wordHistory.indexOf(this.keywords);
					this.wordHistory.splice(i, 1);
					this.wordHistory.unshift(this.keywords);
					localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
                    console.log(i)
				}
            // console.log(this.wordHistory)
        },
        
        focus(){
            if(this.labelChange){
                this.labelChange=!this.labelChange
            }
        },
        blur(){
            if(this.keywords!=0){
                this.labelChange=false
            }else if(this.keywords==0){
                this.labelChange=true
            }
        },
        inputswitch(){
            if(this.keywords.length<1){
                this.name="SearchHot"
            }else{
                this.name="SearchSuggest"
            }
        },
        result(event){
            this.name="SearchResult"
            this.setHistory();
            event.target.blur();
        },
        delhotword(){
            localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
        },
    },
    components:{
        SearchHot,
        SearchSuggest,
        SearchResult,
    },

}
</script>


<style lang="less" scoped>
.search{
    padding: 15px 10px;
    position: relative;
    .input-cover{
        position: relative;
        width: 100%;
        height: 30px;
        padding: 0 30px;
        box-sizing: border-box;
        background: #ebecec;
        border-radius: 30px;
        .input-icon{
            background: url("../assets/search.svg") no-repeat;
            position: absolute;
            top: 9px;
            left: 0;
            margin: 0 8px;
            width: 13px;
            height: 13px;
            vertical-align: middle;
        }
        .input-text{
            width: 100%;
            height: 30px;
            line-height: 18px;
            padding: 0;
            background: rgba(0,0,0,0);
            font-size: 14px;
            color: #333;
            border-radius: 0;
            border: 0;
            &:focus{
                outline: none;
            }
        }
        .holder{
            position: absolute;
            left: 30px;
            top: 5px;
            font-size: 14px;
            color: #c9c9c9;
            background: rgba(0,0,0,0);
            pointer-events: none;
        }
        .close{
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            line-height: 28px;
            text-align: center;
            .close-icon{
                background: url("../assets/close.svg") no-repeat 0 0 ;
                background-size: contain;
                display: inline-block;
                width: 14px;
                height: 14px;
                vertical-align: middle;
            }
        }
    }
    &::after {
        position: absolute;
        content: "";
        border: 0 solid rgba(0, 0, 0, 0.1);
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        border-bottom-width: 1px;
    }
}
</style>